<template>
  <div class="customers-content" v-loading="loading">
    <template v-if="config.tagId">
      <tool-item
        ref="toolItem"
        :config="config"
        :type="type"
        @setLoading="setLoading"
        @handleEdit="handleEdit"
        @deleteData="deleteData"
        @rollback="editSave"
      ></tool-item>
      <report-item ref="reportItem" v-if="config.runStatus === 1"></report-item>
      <div class="runing-box" v-else-if="config.runStatus === 2">
        <icon-svg name="iconModify"></icon-svg>
        <div>正在运行中，当前进度{{ runRate }}</div>
      </div>
      <div class="no-record" v-else-if="config.runStatus === 3">
        <template>
          <img src="~@/assets/img/no_records.png" /><br />
          <span>运行失败</span>
        </template>
      </div>
    </template>
    <div class="no-record" v-else>
      <template>
        <img src="~@/assets/img/no_records.png" /><br />
        <span>暂无内容</span>
      </template>
    </div>
    <edit-drawer ref="editDrawer" @save="editSave"></edit-drawer>
  </div>
</template>

<script>
import toolItem from './content-tool-item'
import reportItem from './content-report-item'
import editDrawer from '../customers-edit-drawer'
export default {
  components: {
    toolItem,
    reportItem,
    editDrawer
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: String,
      default: 'asideMine'
    }
  },
  data() {
    return {
      loading: false,
      tagData: {},
      runRate: 0,
      timeout: null
    }
  },
  watch: {
    config() {
      clearInterval(this.timeout)
      if (this.config.runStatus === 1) {
        this.getData()
      } else if (this.config.runStatus === 2) {
        this.getRunRate()
        this.timeout = setInterval(() => {
          this.getRunRate()
        }, 2000)
      } else if (this.config.runStatus === 3) {
        this.getData()
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timeout)
  },
  methods: {
    getData() {
      this.$ajax({
        url: this.$ajax.setUrl(`DiffCustomerPortraits/getDiffTagParamInfo/${this.config.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tagData = data.data || {}
          if (this.config.runStatus === 1) {
            this.$refs.reportItem.setData(this.tagData)
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getRunRate() {
      this.$ajax({
        url: this.$ajax.setUrl(`DiffCustomerPortraits/getRunSchedule/${this.config.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.runRate = data.data.schedul
          if (data.data.runStatus !== 2) {
            clearInterval(this.timeout)
            this.$emit('editSave')
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setLoading(bool) {
      this.loading = bool
    },
    handleEdit() {
      if (this.tagData.tagId) {
        this.$refs.editDrawer.showDrawer({
          type: 'edit',
          data: this.tagData
        })
      }
    },
    editSave() {
      this.$emit('editSave')
    },
    deleteData() {
      this.$emit('deleteData')
    }
  }
}
</script>

<style lang="scss">
.tag-customers {
  .customers-content {
    height: 100%;
    padding: 0 0 5px 350px;
    background-color: #fff;
    .runing-box {
      padding-top: 200px;
      text-align: center;
      font-size: 26px;
      .icon-svg__iconModify {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
      }
    }
    .no-record {
      padding-top: 200px;
      text-align: center;
      span {
        line-height: 30px;
      }
    }
  }
}
</style>
